<template>
	<view>
		<!-- 轮播 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="width: 100%;">
			<swiper-item v-for="(item,index) in list" :key="index">
				<!-- 渲染数据 -->
				<image :src="item.img" mode="" style="width: 100%;"></image>
				<!-- 图片路径绑定 -->
			</swiper-item>
		</swiper>
		<!-- 中间部分 -->
		<view class="app">
			<view @click="wanshi" class="div">
				<view class="iconfont icon-ziyuan"></view>
				<text>顽石超市</text>
			</view>
			<view class="div" @click="lianxiwm">
				<view class="iconfont icon-guanyuwomen"></view>
				<text>联系我们</text>
			</view>
			<view class="div" @click="shejiao">
				<view class="iconfont icon-tupian"></view>
				<text>社交图片</text>
			</view>
			<view class="div">
				<view class="iconfont icon-shipin"></view>
				<text>学习视频</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="tui">
			<text>推荐商品</text>
		</view>
		<!-- 组件 -->
		<ShangPin></ShangPin>
	</view>
</template>

<script>
	import ShangPin from '@/components/shangpinpin/shangpinpin.vue';
	export default {
		// created此方法在页面渲染之前自动运行
		created() {
			this.getlist();
		},
		data() {
			return {
				list:[],
				shangpinlist:[],
				pageindex:1
			}
		},
		components:{
			"ShangPin":ShangPin
		},
		methods: {
			wanshi(){
				// navigateTo跳转普通页面
				// 跳转超市页面
				uni.navigateTo({
					url:"../cshi/cshi"
				})
			},
			// 跳转联系我们页面
			lianxiwm(){
				uni.navigateTo({
					url:"../lianxiwomen/lianxiwomen"
				})
			},
			// 跳转社交图片页面
			shejiao(){
				uni.navigateTo({
					url:"../shejiaotupian/shejiaotupian"
				})
			},
			// 获取轮播数据
			async getlist(){
				const {status,message} = await uni.$Http.get(`getlunbo`)
				// uni.$Http.get(`getlunbo`)获取数据方法
				this.list = message
			},
		}
	}
</script>

<style scoped>
	
.app{
	display: flex;
	justify-content: space-around;
	text-align: center;
	margin-top: 10px;
}
.iconfont{
	text-align: center;
	font-size: 50rpx;
	width: 57px;
	height: 57px;
	line-height: 57px;
	background-color: #B50E03;
	border-radius: 50px;
	/* 边框变圆 */
	color:#FBFCFE;
	margin-bottom: 6px;
}
.tui{
	width: 100%;
	height: 120rpx;
	text-align: center;
	line-height: 120rpx;
	letter-spacing: 20px;
	color: #C74622;
	font-size: 23px;
	font-weight:bold;
}
.shang{
	background-color: #FFFFFF;
}
.liebiao{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	background-color: #D7CBBF;
}
.ddd{
	width: 150px;
}
.img1{
	width: 100%;
	background-color: #007AFF;
}
.text1{
	font-size: 13px;
}
.jia{
	font-size: 20px;
	color:#E43C2F;
}
.ge{
	text-decoration: line-through;
}
</style>
